<template>
  <div class="remake-calendar">
    <el-calendar v-model="value">
        <template v-slot:date-cell="{ data }">
            <DateDT :day="data.day" :dateList="dateList"/>
        </template>
    </el-calendar>
  </div>
</template>

<script setup>
import DateDT from './components/DateDT.vue'
import { defineProps, ref } from 'vue'
const {dateList} = defineProps(['dateList'])
const value = ref(new Date())
</script>

<style lang="less">
.remake-calendar {
  width: 300px;
  margin: 0 auto;
  .el-calendar {
    .el-calendar-table .el-calendar-day {
      height: 37px;
      line-height: 37px;
      text-align: center;
      padding: 0;
    }
    .el-calendar-table .el-calendar-day:hover, .el-calendar-table td.current {
        border-radius: 50%;
        color: #000;
    }
    .el-calendar-table td{
        border: 0;
    }
    .el-calendar-table td.is-today{
        background-color: #409eff;
        color: white;
        border-radius: 50%;
    }
    .hasState {
        position: relative; 
    }
    .hasState::after{
        content: '';
        position: absolute;
        bottom: 2px;
        left: 50%;
        margin-left: -4px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }
    .finish::after{
        background: green;
    }
    .unfinish::after{
        background: pink;
    }
    .toolTip{
        width: 200px;
        background: white;
        position: absolute;
        z-index: 99;
        display: none;
        border: 1px solid red;
    }
    .is-selected .toolTip{
        display: block;
    }
  }
}
</style>
